import React, { useState } from "react";
import "./index.css";
import Swhter from "../swhter/swhter";
import { Button, Modal } from "antd";
import { Overlay } from "react-vant";
import axios from "axios";
import SearchComponent from "../searchComponent/Seatrch";
import Hua from "../hua/hua"
const You = () => {
  const [visible, setVisible] = useState(false);
  const [username, setUsername] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [activeTabIndex, setActiveTabIndex] = useState(0);
  // 用于控制展开/收起状态，true表示展开，false表示收起
  const [isExpanded, setIsExpanded] = useState(false);
  // 模拟Tab列表数据，实际中可以从接口等获取
  const tabList = [
    { id: 1, title: "为你推荐" },
    { id: 2, title: "春节" },
    { id: 3, title: "年会" },
    { id: 4, title: "年终述职" },
    { id: 5, title: "年货节" },
    { id: 4, title: "邀请函" },
    { id: 5, title: "小红书" },
    { id: 4, title: "喜报" },
    { id: 5, title: "早安" },
    { id: 4, title: "手机海报" },
    { id: 5, title: "简历" },
    { id: 4, title: "年终冲刺" },
    { id: 5, title: "名片印刷" },
    { id: 4, title: "招聘" },
    { id: 5, title: "Tab 5" },
    { id: 4, title: "Tab 4" },
    { id: 5, title: "Tab 5" },
    { id: 4, title: "Tab 4" },
    { id: 5, title: "Tab 5" },
    { id: 4, title: "Tab 4" },
    { id: 5, title: "Tab 5" },
    { id: 4, title: "Tab 4" },
    { id: 4, title: "Tab 4" },
    { id: 5, title: "Tab 5" },
    { id: 4, title: "Tab 4" },
    { id: 5, title: "Tab 5" },
    { id: 4, title: "Tab 4" },
    { id: 4, title: "Tab 4" },
    { id: 5, title: "Tab 5" },
    { id: 4, title: "Tab 4" },
    { id: 5, title: "Tab 5" },
    { id: 4, title: "Tab 4" },
    { id: 4, title: "Tab 4" },
    { id: 5, title: "Tab 5" },
    { id: 4, title: "Tab 4" },
    { id: 5, title: "Tab 5" },
    { id: 4, title: "Tab 4" },
  ];
  const images = [
    'https://img95.699pic.com/desgin_photo/40266/9994_list.jpg!/fw/431/clip/0x300a0a0',
    'https://img95.699pic.com/desgin_photo/40266/1673_list.jpg!/fw/431/clip/0x300a0a0',
    'https://img95.699pic.com/desgin_photo/40269/8381_list.jpg!/fw/431/clip/0x300a0a0',
    'https://img95.699pic.com/desgin_photo/40269/8311_list.jpg!/fw/431/clip/0x300a0a0',
    'https://img95.699pic.com/desgin_photo/40269/8324_list.jpg!/fw/431/clip/0x300a0a0',
    'https://img95.699pic.com/desgin_photo/40268/9006_list.jpg!/fw/431/clip/0x300a0a0',
    'https://img95.699pic.com/desgin_photo/40267/0041_list.jpg!/fw/431/clip/0x300a0a0',
    'https://img95.699pic.com/desgin_photo/40269/8633_list.jpg!/fw/431/clip/0x300a0a0',
    'https://img95.699pic.com/desgin_photo/40268/9006_list.jpg!/fw/431/clip/0x300a0a0',
    'https://img95.699pic.com/desgin_photo/40267/0041_list.jpg!/fw/431/clip/0x300a0a0',
    'https://img95.699pic.com/desgin_photo/40266/1672_list.jpg!/fw/431/clip/0x300a0a0',
    'https://img95.699pic.com/desgin_photo/40268/4797_list.jpg!/fw/431/clip/0x300a0a0',
    'https://img95.699pic.com/desgin_photo/40269/7377_list.jpg!/fw/431/clip/0x300a0a0',
    'https://img95.699pic.com/desgin_photo/40266/9994_list.jpg!/fw/431/clip/0x300a0a0',
    'https://img95.699pic.com/desgin_photo/40266/1673_list.jpg!/fw/431/clip/0x300a0a0',
    'https://img95.699pic.com/desgin_photo/40269/8381_list.jpg!/fw/431/clip/0x300a0a0',
    'https://img95.699pic.com/desgin_photo/40269/8311_list.jpg!/fw/431/clip/0x300a0a0',
    'https://img95.699pic.com/desgin_photo/40269/8324_list.jpg!/fw/431/clip/0x300a0a0',
    'https://img95.699pic.com/desgin_photo/40268/9006_list.jpg!/fw/431/clip/0x300a0a0',
    'https://img95.699pic.com/desgin_photo/40267/0041_list.jpg!/fw/431/clip/0x300a0a0',
    'https://img95.699pic.com/desgin_photo/40267/0041_list.jpg!/fw/431/clip/0x300a0a0',
    'https://img95.699pic.com/desgin_photo/40269/8324_list.jpg!/fw/431/clip/0x300a0a0',
    'https://img95.699pic.com/desgin_photo/40268/9006_list.jpg!/fw/431/clip/0x300a0a0',
    'https://img95.699pic.com/desgin_photo/40267/0041_list.jpg!/fw/431/clip/0x300a0a0',

  ];
  const onChange = (key) => {
    console.log(key);
  };

  const btn = () => {
    axios.post("/api/v1/login", { username, password }).then((res) => {
      console.log(res.data);
      if (res.data.code === 200) {
        localStorage.setItem("token", res.data.token);
        // 关闭模态框
        alert("登录成功");
        setIsModalOpen(false);
        setVisible(false);
      } else {
        alert('密码或者账号不对')
      }
    });
  };
  //渲染接口




  const [isModalOpen, setIsModalOpen] = useState(false);

  const showModal = () => {
    setIsModalOpen(true);
    // 登录成功按钮消失
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  return (
    <div className="box">
      <div className="box1">
        <Swhter />
      </div>
      <div className="search">
        <SearchComponent></SearchComponent>
      </div>
      <div>
        <Button
          onClick={() => setVisible(true)}
          type="primary"
          // onClick={showModal}
          style={{
            position: "absolute",
            top: "2rem",
            right: "1rem",
            transform: "translate(-50%, -50%)",
          }}
        >
          {localStorage.getItem("token") ? (
            <div>登录成功</div>
          ) : (
            <div>请登录</div>
          )}
        </Button>
      </div>
      <Overlay
        visible={visible}
        onClick={() => setVisible(false)}
        title="登录"
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        width={"800px"}
        className="custom-modal"
        style={{
          height: "100%",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        <div
          style={{
            width: 800,
            height: 600,
            backgroundColor: "#fff",
            borderRadius: 4,
          }}
        >
          <div style={{ float: "left", width: "40%", height: "100%" }} >
            <img
              src="../../image/2.png"
              alt=""
              style={{ width: "100%", height: "100%" }}
            />
          </div>

          <div className="right_log" style={{ textAlign: "center" }}>
            <h1>
              <span className="loginblue" style={{ color: "blue" }}>账号密码</span>登录
            </h1>
            <span>
              <input
                type="text"
                placeholder="请输入用户名"
                onChange={(e) => setUsername(e.target.value)}
                style={{ width: "400px", height: "40px", borderRadius: "5px", border: '1px solid rgb(176, 176, 176)' }}
              />
            </span>
            <p>
              <input
                type="text"
                placeholder="请输入密码"
                onChange={(e) => setPassword(e.target.value)}
                style={{ width: "400px", height: "40px", borderRadius: "5px", border: '1px solid rgb(176, 176, 176)' }}
              />
            </p>
            <p>
              <button
                onClick={btn}
                style={{ width: "400px", height: "40px", background: "blue", borderRadius: "5px", border: 'none', color: '#f0f0f0' }}
              >
                登录
              </button>
            </p>
          </div>
        </div>
      </Overlay>

      <div className="box2">
        <Hua />
      </div>
      <div className="box3">
        <div className="tab-container">
          <div className="tab-header">
            {tabList
              .slice(0, isExpanded ? tabList.length : 15) // 根据展开/收起状态显示不同数量的Tab标题
              .map((tab, index) => (
                <div
                  key={tab.id}
                  className={`tab-title ${activeTabIndex === index ? "active" : ""
                    }`}
                  onClick={() => setActiveTabIndex(index)}
                >
                  {tab.title}
                </div>
              ))}
            <div
              className="expand-icon"
              onClick={() => setIsExpanded(!isExpanded)}
            >
              {isExpanded ? "-" : "+"}{" "}
              {/* 根据状态显示不同图标（简单用 + - 示意） */}
            </div>
          </div>
          {/* <div className="tab-content">
            {tabList[activeTabIndex] && (
              <p>这里是 {tabList[activeTabIndex].title} 的内容。</p>
            )}
          </div> */}
          {images.map((image, index) => (
            <div className='images' style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '5%' }}>
              <img key={index} src={image} alt={`${index}`} />

            </div>


          ))}
        </div>{" "}
      </div>
      <div></div>
      <div></div>
    </div>
  );
};

export default You;
